require("../css/sport.less")

tool.footer("sport")

window.onload = function () {

    // 头部选项卡
    let titleLis = document.querySelectorAll(".title li")
    let contentLis = document.querySelectorAll(".content li")

    titleLis.forEach(function (item, index) {
        item.addEventListener("click", function () {
            titleLis.forEach(function (item, index1) {
                titleLis[index1].classList.remove("active")
                contentLis[index1].classList.remove("show")
            })
            this.classList.add("active")
            contentLis[index].classList.add("show")
        })
    })
    // 请求用户课程数据渲染页面
    // 获取标签
    let banner = document.querySelector(".banner")
    let coursesContent = document.querySelector(".coursesContent")
    let introductionP1 = document.querySelector(".introduction p:first-child")
    let introductionP2 = document.querySelector(".introduction p:last-child")
    let Courses = document.querySelector(".Courses")
    let baseUrl = "http://139.9.177.51:8099"

    let userId = localStorage.getItem("userId")
    // 请求所有课程信息
    http.get("/sports/courseList", {
        id: userId
    }, function (res) {
        console.log(res);
        // 找到最新课程,放最前面
        let newCourse = res.data.find(function (item) {
            return item.latest == 1
        })
        banner.style.background = `url(${baseUrl + newCourse.imgurl})`
        introductionP1.textContent = newCourse.name
        introductionP2.textContent = newCourse.desc
        // 点击跳转课程详情
        coursesContent.addEventListener("click", function () {
            location.href = `courseInfo.html?id=${newCourse.courseId}`
        })
        // 渲染下面的课程
        let str = ""
        res.data.forEach(function (item, index) {
            str += `
                    <a href= 'courseInfo.html?id=${item.courseId}'>
                        <div class="coursesDetails mt10">
                            <img src="${baseUrl + item.imgurl}" alt="">
                            <div class="textbox dpflex">
                                <p class="fs20">${item.name}</p>
                                <p class="fs14">${item.desc}</p>
                            </div>
                        </div>
                    </a>
                    `;
        })
        Courses.innerHTML += str
    })
}